<template>
  <div style="display: flex">
    <el-container>
      <el-header>
        <div class="report_header" ref="headerHeight">
          <div class="report_header_left"></div>
          <div
            style="
              width: 300px;
              display: flex;
              align-items: center;
              margin-left: 10px;
            "
          >
            <svg-icon class="primary" :icon-class="$route.meta.icon" />
            <span style="margin-left: 5px" class="primary">{{
              $route.meta.title
            }}</span>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: flex-end;
              width: 100%;
            "
          >
            <div
              style="
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                overflow: hidden;
                height: 41px;
              "
            >

              <div class="report_header_query">
                <el-input
                  prefix-icon="el-icon-search"
                  placeholder="请输入景区名"
                  v-model="query.name"
                ></el-input>
              </div>
            </div>
            <el-button
              style="margin-left: 10px; margin-top: 5px"
              size="small"
              type="primary"
              @click="queryClick"
              >查询</el-button
            >
            <el-button
              style="margin-left: 10px; margin-top: 5px"
              size="small"
              type="primary"
              @click="addClick"
              v-permission="['scenic.add']"
              >新增</el-button
            >
          </div>
        </div>
      </el-header>
      <div class="pd10">
        <el-table
          :data="brandData"
          border
          stripe
          v-loadMore="[payLoads, 'bank-list']"
          :height="curHeight"
          @sort-change="sortChange"
          ref="table"
          style="width: 100%"
        >


       <el-table-column type="index" label="序号" width="50" align="center" fixed>
          </el-table-column>
             <el-table-column label="景区名称" align="left" prop="name" >
          </el-table-column>
                <el-table-column label="缩略图" align="left" prop="thumbnail" width="120">
         <template slot-scope="scope">
              <img :src="scope.row.thumbnail" style="width: 80px; vertical-align:middle; overflow: hidden;">
            </template>
          </el-table-column>
          <el-table-column label="地理位置" align="left" prop="address">
          </el-table-column>
          <!-- <el-table-column label="所在区域" align="left" prop="address">
          </el-table-column> -->
             <el-table-column label="副标题" align="left" prop="subTitle">
          </el-table-column>
             <el-table-column label="营业时间" align="left" prop="openingHours">

          </el-table-column>


              <!-- <el-table-column label="副标题" align="left" prop="name">
          </el-table-column> -->


          <el-table-column label="操作" fixed="right" align="center" width="80">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                v-permission="['scenic.edit']"
                placement="top-start"
              >
                <a @click="editClick(scope.row)">
                  <i style="color: #409eff" class="el-icon-edit"></i>
                </a>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                v-permission="['scenic.del']"
                placement="top-start"
              >
                <a style="margin-left: 10px" @click="deletescenic(scope.row)">
                  <i style="color: #f56c6c" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-footer class="el-footerBox">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="loadBank"
        ></pagination>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { list as sysMchList, getInfo } from "@/api/sysMch";
import { list, del, update } from "@/api/scenic";
import utils from "../../utils/utils.js";
import { EventBus } from "@/api/eventBus";
import Pagination from "@/components/Pagination";
import loadMore from "@/utils/loadMore.js";
export default {
  name: "scenic-list",
  directives: {
    permission,
    loadMore,
  },
  data() {
    return {

        form:[],
     brandData: [],
        mchType: '',
        pageNum: 1,
        mchIdOptions: [],
        pageSize: 10,
        total: 0,
        tempLng:'',
        queryType: true,
        query: {
          // sysMchId: '',
          name: '',
        },
        keyword: {
          // sysMchId: '',
          name: '',
        },
        curHeight: null,
        excelData: [],
        direction: '',
        sortField: '',
        payLoads: '',
        sorting: {
          id: '',
          orders: ''
        },
        mapShow:false
    };
  },
  components: {
    Pagination,

  },
  created() {
      this.loadBank()
       EventBus.$on('scenic-add', res => { // 监听新增完毕
        // 更新列表数组
        console.log(res);
        this.brandData.push(res)
      });
      EventBus.$on('scenic-edit', res => { // 监听新增完毕
        // 更新列表数组
        for (let i = 0; i < this.brandData.length; i++) {
          if (this.brandData[i].id == res.id) {
            this.$set(this.brandData, i, res)
          }
        }
      })

  },
  mounted() {

    this.comeIn();
    this.beforeMount();
  },
  filters: {},
  activated() {
    this.payLoads = new Date().getTime();
  },

  methods: {
    beforeMount() {
      var _this = this;
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 266; //减去页面上固定高度height
          } else {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 220; //减去页面上固定高度height
          }
        })();
      };
    },
    comeIn() {
      var h =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 220; //减去页面上固定高度height
    },
    queryClick(){
       this.keyword = this.query;
       console.log(this.query);
        this.pageNum = 1
        this.loadBank()
    },
    addClick(){
         this.$router.push({
          path: '/scenic/add'
        })
    },
    sortChange(){},
    loadBank(){
      var _this=this
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        // params.append('mchId', _this.query.sysMchId)
        params.append('name', _this.keyword.name);
         list(params).then(response => {
           console.log(params);
             console.log(response);
          this.brandData = response.data.data
         console.log(this.brandData);

          this.total = response.data.total
          console.log(total);
        }).catch(error => {
          console.log('error!!')
        });
    },
    editClick(row){
        console.log(row);
         this.$router.push({
          path: '/scenic/edit',
          query: {
            id: row.id
          }
        })
    },
    deletescenic(data){

         console.log(data)
        var _this = this
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(data.id).then(response => {
            console.log(response)
            if (response.type)
              // 更新列表数组
              _this.brandData.forEach(function(item, index) {
                if (item.id == data.id) {
                  _this.brandData.splice(index, 1)
                }
              })
          }).catch(error => {
            console.log('error!!')
          });
        }).catch(() => {});
    }
  },
};
</script>

<style scoped>
.el-footerBox {
  height: 50px !important;
  line-height: 50px !important;
  border-top: 1px solid #f2f2f2;
}

.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/.el-header {
  padding: 10px;
  /* height: 100% !important; */
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}
.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409eff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.report_header_date {
  margin-left: 10px;
  width: 250px;
  margin-top: 5px;
}
.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}
</style>
